<template>
	<div>
		<div class="topTxt">
			<div  class="codeScan">点击下方兑换码进行扫描</div>
			<div class="codeScan" v-if="pswState">密码</div>
		</div>
		<ul>
			<li v-for="item in arr" >
				<span  @click="thirdNoClick(item.thirdNo)" class="thirdCode">{{item.thirdNo}}</span>
				<span class="thirdCode">{{item.couPwd}}</span>
			</li>
		</ul>
    	<modal v-show="erweima" @close_modal="erweima=false">
  		<div class="ballot_result">
  			<svg id ='barcode'></svg>
  		</div>
  	</modal>
  	<modal v-if="thirdDescArrState">
    	<div class="model">
    		<div class="modalTxt">使用须知</div>
    		<div>
    			<ul class="modalUl">
    				<li v-for="item in thirdDescString.thirdDescArr">{{item}}</li>
    			</ul>
    		</div>
    		<div class="modalBtn" @click="thirdDescArrState=false">确定</div>
    	</div>
    </modal>
	</div>

</template>

<script>
	import * as types from '../../vuex/types.js'
	import getData from '../../service/getData.js'
    import {MessageBox} from 'mint-ui'
    import { mapState } from 'vuex'
	// var JsBarcode = require('jsbarcode');
	var JsBarcode =null;
	export default{
		data(){
			return{
				arr:[],
				pswState:false,
				erweima:false,
				thirdDescArrState:false,
				thirdDescString:{},
				thirdUrlState:''
			}

		},
		created:function(){
			 this.getJsBarcode()
			 this.thirdUrlState=this.$route.query.thirdUrlState
			 let me=this
			 getData.getThirdDesc({method:'post',data:{mchtId:me.$route.query.mchtId,couponId:me.$route.query.couponId,usrId:me.userInfo.usrId}}).then(function(rep){
			 	if(rep.content.thirdDescs!=''){
			 		if(rep.content.thirdType!=='url'){
			 			me.thirdDescArrState=true
			 		}else{
			 			me.thirdUrlState='true'
			 		}
			 		me.thirdDescString.thirdDescArr=rep.content.thirdDescs.split('；')
			 	}			 	
			 	me.arr=rep.content.list
				if(me.arr[0].couPwd!=""){
					me.pswState=true
				}
			 })
	},
	 computed: {
    ...mapState({
    	userInfo: state => state.user.userInfo
    }),
  },
  methods:{

	thirdNoClick(x){
			let me=this
		me.erweima=true
			JsBarcode("#barcode", x,{width:1,height:65,  displayValue:false});
		},
	getJsBarcode () {
			return  import(/* webpackChunkName: "JsBarcode" */ 'jsbarcode').then((JsBarc) => {
							JsBarcode = JsBarc;
						}).catch( (err) => `JsBarcode - ${err}`)
		}
  },
	beforeRouteLeave(to, from, next){

    next();
  }
	}
</script>

<style scoped="scoped">
	.topTxt{
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid gainsboro;
	}
	.topTxt span:nth-of-type(1){
		float: left;
		height: 4rem;
		line-height: 4rem;
		margin-left: 2rem;
	}
	.topTxt span:nth-of-type(2){
		float: right;
		height: 4rem;
		line-height: 4rem;
		margin-right: 2rem;
	}
	.ballot_result {
  width: 90%;
  margin: auto;
  height: 16rem;
  /*line-height: 18rem;*/
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  margin-top: 50%;
  text-align: center;
}
p{
	width: 100%;
	height: 4rem;
	line-height: 4rem;
	border-bottom: 1px solid gainsboro;
}
.spanP1{
	width: 40%;
	float: left;
	margin-left: 2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.spanP2{
	width:40%;
	float: right;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 2rem;
}
.model{ 	
	min-height: 10rem;
	width: 90%;
	background: #ffffff;
	border-radius: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .modalTxt{	
  	height: 2rem;
  	line-height: 2rem;
  	text-align: center;
  	width: 100%;
  }
  .modalUl{
  	width: 100%;
  	padding:1rem 2rem;
  	min-height: 6rem;
  }
  .modalBtn{
  	background: #ee5088;
  	color:#FFFFFF ;
  	text-align: center;
  	line-height: 2.5rem;
  	height: 2.5rem;
  	width: 100%;
  	border-bottom-left-radius: 1rem;
  	border-bottom-right-radius: 1rem;
  }
  
  .thirdCode{
  	width: 50%;
  	height: 3rem;
  	text-align: center;
  	line-height: 3rem;
  	float: left;
  	display: block;
  	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .codeScan{
  	width: 50%;
  	text-align: center;
  	height: 3rem;
  	line-height: 3rem;
  	float: left;
  }
</style>
<style>
 
</style>
